4 min read

Visual network

library(visNetwork)
library(widgetframe)
## Loading required package: htmlwidgets

Hierarchical network example

Using Font Awesome integration

nodes <- data.frame(id = 1:7,
                    group = c("A", "A", "A","B","B","B","B")
                    )

edges <- data.frame(
  from = c(1,2,2,2,3,3),
  to = c(2,3,4,5,6,7)
)

figure <- visNetwork(nodes, edges, width = "100%") %>%
  visGroups(groupname = "A", shape = "icon", 
            icon = list(code = "f0c0", size = 75)) %>% 
  visGroups(groupname = "B", shape = "icon", 
            icon = list(code = "f007", color = "red")) %>%
  visEdges(arrows = "from") %>% 
  visHierarchicalLayout() %>% 
  addFontAwesome()

htmlwidgets::saveWidget(figure, file = "figure.html", selfcontained = T)

#htmltools::includeHTML("figure.html")
#frameableWidget(figure, renderCallback = NULL)
#figure

htmlwidgets::saveWidget(
widgetframe::frameableWidget(figure),'hierarchical.html')
htmltools::includeHTML("hierarchical.html")
visNetwork

Random netowrk generated example

nb <- 10
nodes <- data.frame(id = 1:nb, label = paste("Label", 1:nb),
 group = sample(LETTERS[1:3], nb, replace = TRUE), value = 1:nb,
 title = paste0("<p>", 1:nb,"<br>Tooltip !</p>"), stringsAsFactors = FALSE)

edges <- data.frame(from = trunc(runif(nb)*(nb-1))+1,
 to = trunc(runif(nb)*(nb-1))+1,
 value = rnorm(nb, 10), label = paste("Edge", 1:nb),
 title = paste0("<p>", 1:nb,"<br>Edge Tooltip !</p>"))
g <- visNetwork(nodes, edges, width = "100%")
frameableWidget(g, renderCallback = NULL)

R part classification tree

Iris dataset

library(rpart)
library(sparkline)
## Warning: package 'sparkline' was built under R version 4.0.4
res <- rpart(Species~., data=iris)
figure <- visTree(res, main = "Iris classification Tree", width = "100%")


htmlwidgets::saveWidget(
widgetframe::frameableWidget(figure),'classification.html')
htmltools::includeHTML("classification.html")
visNetwork

Select by ID

Les miserables example

nodes <- jsonlite::fromJSON("https://raw.githubusercontent.com/datastorm-open/datastorm-open.github.io/master/visNetwork/data/nodes_miserables.json")

edges <- jsonlite::fromJSON("https://raw.githubusercontent.com/datastorm-open/datastorm-open.github.io/master/visNetwork/data/edges_miserables.json")


figure <- visNetwork(nodes, edges, height = "700px", width = "100%") %>%
  visOptions(selectedBy = "group", 
             highlightNearest = TRUE, 
             nodesIdSelection = TRUE) %>%
  visPhysics(stabilization = FALSE)

htmlwidgets::saveWidget(
widgetframe::frameableWidget(figure),'lesmis.html')
htmltools::includeHTML("lesmis.html")
visNetwork

Circle network

Example of defining coordinates

nnodes <- 100
nnedges <- 200

nodes <- data.frame(id = 1:nnodes)
edges <- data.frame(from = sample(1:nnodes, nnedges, replace = T),
                    to = sample(1:nnodes, nnedges, replace = T))

figure <- visNetwork(nodes, edges, height = "500px") %>%
  visIgraphLayout(layout = "layout_in_circle") %>%
  visNodes(size = 10) %>%
  visOptions(highlightNearest = list(enabled = T, hover = T), 
             nodesIdSelection = T)


htmlwidgets::saveWidget(
widgetframe::frameableWidget(figure),'circle.html')
htmltools::includeHTML("circle.html")
visNetwork

Custom image example

path_to_images <- "https://raw.githubusercontent.com/datastorm-open/datastorm-open.github.io/master/visNetwork/data/img/indonesia/"
 
nodes <- data.frame(id = 1:4, 
                    shape = c("image", "circularImage"),
                    image = paste0(path_to_images, 1:4, ".png"),
                    label = "I'm an image")
  
edges <- data.frame(from = c(2,4,3,3), to = c(1,2,4,2))

figure <- visNetwork(nodes, edges, width = "100%") %>% 
  visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
  visLayout(randomSeed = 2)


htmlwidgets::saveWidget(
widgetframe::frameableWidget(figure),'custom.html')
htmltools::includeHTML("custom.html")
visNetwork